{% extends "base.html" %}
{% block title %}类型信息{% endblock %}
{% block stylecontent %}
<link href="/static/css/styles.css" rel="stylesheet"/>
{% endblock %}
{% block content %}
<div class="container-fluid px-4">
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"></li>
    </ol>
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-chart-area me-1"></i>
            电影类型饼图
        </div>
        <div class="card-body">
            <div id="mainOne" style="width: 100%;height: 650px;"></div>
        </div>
    </div>
</div>
{% endblock %}
{% block scriptcontent %}
<script>
  var chartDom = document.getElementById('mainOne')
  var myChart = echarts.init(chartDom)
  var option = {
    //标题
    title: {
      text: '',
      left: 'center',
    },
    //提示框
    tooltip: {
      trigger: 'item',
    },
    //图例
    legend: {
      left: 'center',
      icon: 'pin',
    },
    //系列列表
    series: [
      {
        name: '电影类型',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 20,
          borderColor: '#000',
          borderWidth: 2,
        },
        data: {{ result | safe }},
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
          labelLine: {
            show: false,
          },
        },
        //动画效果
        animationDuration: 5000,
        animationEasing: 'bounceIn',
      }],
  }
  option && myChart.setOption(option)
</script>
{% endblock %}
